<template>
  <div class="combined-goods-card" :class="abnormal">
    <div class="goods-image">
       <XeImage fit="blur" :src="goodsImgSrc" radiusData="4px" class="customClass"/>
       <div class="abnormal-image" v-show="abnormal"><span class="abnormal-image-tips">{{abnormalImageTips}}</span></div>
       <span class="goods-type" v-show="!abnormal">{{goodsTag}}</span>
    </div>
    <div class="goods-info">
      <div class="goods-title">{{goodsInfo.goods_name}}</div>
      <div class="goods-msg">
        <template v-if="!isENT && !abnormal">{{periodTime}}</template>
        <template v-if="isENT && !abnormal">
          {{skuName}}
          <span
            style="display: inline-block;
                width: 1px;
                height: 0.18rem;
                vertical-align: middle;
                background: #eee;
                margin-top: -1px;"
                v-if="skuName && goodsInfo.sku_num"
          ></span> ×{{goodsInfo.sku_num}}
        </template>
        <template v-if="abnormal">
          <span class="abnormal-tips">{{abnormalTips}}</span>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { replaceCDN } from "@xiaoe/js-tools/lib/replaceCDN";
import { Image as XeImage } from '@xiaoe/vant';
import {BAN_TAK, SERVICE_GOODS, VALUE_COUPON, ENTITY_GOODS, RESOURCE_TYPES_TKEYS} from "./constans";
import locale from '../../mixins/locale'
export default {
  name: "GoodsCard",
  mixins:[locale],
  props:{
    goodsInfo:{
      type: Object,
      default: ()=>({})
    }
  },
  components:{
    XeImage
  },
  data(){
    return{

    }
  },
  computed:{
    isENT(){
      return this.goodsInfo.spu_type === ENTITY_GOODS || this.goodsInfo.spu_type === SERVICE_GOODS || this.goodsInfo.spu_type === VALUE_COUPON || this.goodsInfo.spu_type === BAN_TAK
    },
    skuName(){
      if(this.goodsInfo.spu_type === BAN_TAK) return ''//班课特殊处理
      if(!this.isENT || !this.goodsInfo.sku_name) return ''
      return this.goodsInfo.sku_name
    },
    goodsTag(){
      return this.goodsInfo.spu_type && this.t(RESOURCE_TYPES_TKEYS[this.goodsInfo.spu_type])
    },
    abnormal(){
      return this.goodsInfo.goods_state === 0 ? '' : 'isAbnormal'
    },
    abnormalTips(){
      switch(this.goodsInfo.goods_state){
        case 1: return this.t('combined_delisted_tips')
        case 2: return this.t('combined_sold_out_tips')
        case 3: return this.t('combined_deleted_tips')
        case 4: return this.t('combined_sold_out_buy_tips')
        case 5: return this.t('combined_available_tips')
        case 6: return this.t('combined_selling_abnormality_tips')
        case 7: return this.t('combined_purchase_limit_reached_tips')
        case 8: return this.t('combined_possessed_tips')
        case 9: return this.t('combined_exchangeable_tips')
        case 10: return this.t('combined_commodity_abnormality_tips')
      }
    },
    abnormalImageTips(){
      switch(this.goodsInfo.goods_state){
        case 1: return this.t('combined_delisted')
        case 2: return this.t('combined_sold_out')
        case 3: return this.t('combined_deleted')
        case 4: return this.t('combined_sold_out_buy')
        case 5: return this.t('combined_available')
        case 6: return this.t('combined_selling_abnormality')
        case 7: return this.t('combined_purchase_limit_reached')
        case 8: return this.t('combined_possessed')
        case 9: return this.t('combined_exchangeable')
        case 10: return this.t('combined_commodity_abnormality')
      }
    },
    periodTime(){
      const {period_value, period_type, new_period_value, new_period_type} = this.goodsInfo;

      if(new_period_type === -1) {
        if (period_type === 2) {
          const day = period_value / 3600 / 24;
          return this.t('combined_purchase',{days: day})
        }
        if (period_type === 1) {
          return this.t('combined_days',{days: period_value})
        }
      } else{
         if (new_period_type === 2) {
          const day = new_period_value / 3600 / 24;
          return this.t('combined_purchase',{days: day})
        }
        if (new_period_type === 1) {
          return this.t('combined_days',{days: new_period_value})
        }
      }
      return this.t('combined_long')
    },
    goodsImgSrc() {
      if (Array.isArray(this.goodsInfo.goods_img)) {
        return replaceCDN(this.goodsInfo.goods_img[0], { width: 400 })
      }
      return this.goodsInfo.goods_img && replaceCDN(this.goodsInfo.goods_img, { width: 400 })
    },
  },
  methods:{

  }
};
</script>

<style lang="scss" scoped>
.customClass{
  width: 2.12rem;
  height: 1.2rem;
  object-fit: contain;
  .xiaoe-image__backdrop{
    border-radius: 4px;
  }
  .xiaoe-image__top-image{
    border-radius: 4px;
  }
}
.combined-goods-card {
  display: flex;
  &:not(:last-child) {
    margin-bottom: 0.24rem;
  }
  .goods-image {
    width: 2.12rem;
    height: 1.2rem;
    position: relative;
    margin-right: 0.16rem;
    .goods-type {
      position: absolute;
      right: 0.08rem;
      bottom: 0.08rem;
      padding: 4px 2px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 4px;
      color: #fff;
      font-size: 10px;
      width: -moz-fit-content;
      width: fit-content;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 0.2rem;
      -webkit-backdrop-filter: blur(0.24rem);
      backdrop-filter: blur(12px);
    }
  }
  .goods-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 4.34rem;
    .goods-title {
      font-size: 14px;
      line-height: 18px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      word-break: break-all;
      overflow-wrap: break-word;
      text-overflow: ellipsis;
    }
    .goods-msg {
      font-size: 12px;
      line-height: 12px;
      color: #ffa114;
      overflow:hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

    }
  }
  .abnormal-tips{
    color: #666666;
    font-size: 10px;
    font-weight: 400;
  }
  .abnormal-image{
    position: absolute;
    font-size: 14px;
    width: 100%;
    height: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    opacity: 0.4;
    .abnormal-image-tips{
      display: inline-block;
      width: -moz-fit-content;
      width: fit-content;
      padding: 0 4px;
      border-radius: 100px;
      color: #fff;
      background: #000000;
      height: 28px;
      line-height: 28px;
      white-space: nowrap;
    }
  }
}
.isAbnormal{
  .goods-title{
    color: #B2B2B2;
  }
}
</style>